前言

2025更新：网站的前端UI是不可能永不改变的，UI的改变往往伴随着实际HTML标签的变动；从而导致我们以前所使用的拦截规则有部分会失效。

而本文不可能每次都跟着修改教程中的图文与拦截规则，所以当你看到本文时，下面展示的拦截规则不一定还能起效，无法直接照搬过去。

因此，我由衷的希望你学习了本文介绍的拦截规则编写方式后，能编写出属于你自己的规则。

先贴一下我目前的B站首页状态与拦截规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
!拦截B站首页顶图
bilibili.com##div.bili-header__banner
! CSS 注入：添加导航栏背景色，以及边距
bilibili.com#$#.bili-header { background-color: #39C5BB !important;margin-bottom: 30px !important; }
!拦截B站首页分区导航栏
bilibili.com##div.bili-header__channel
!拦截B站首页分区导航栏里的彩色滚动项
bilibili.com##ul.left-entry > li.left-loc-entry
!拦截B站首页轮播大图
bilibili.com##div.recommended-swipe
!拦截B站首页的直播卡片
bilibili.com##div.bili-live-card
!拦截B站首页的分类卡片
bilibili.com##div.floor-single-card
!拦截B站动态右侧的话题一列
bilibili.com##aside.right
!拦截B站视频里弹出的一健三连，投票
bilibili.com##div.bili-danmaku-x-follow-to-electric
bilibili.com##div.bili-danmaku-x-guide-all
bilibili.com##div.bili-danmaku-x-guide
bilibili.com##div.bili-danmaku-x-vote
!拦截B站首页指定up主名称的视频(一条为最上层可刷新的，另一条为瀑布流固定刷新的)
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.feed-card:has( > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > div.bili-video-card__info--bottom > a.bili-video-card__info--owner > span.bili-video-card__info--author:has-text(/小姐姐|小仙女|小哥哥|老师|说车|医生|大佬|同学$/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.bili-video-card.is-rcmd.enable-no-interest:has( > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > div.bili-video-card__info--bottom > a.bili-video-card__info--owner > span.bili-video-card__info--author:has-text(/小姐姐|小仙女|小哥哥|老师|说车|医生|大佬|同学$/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.feed-card:has( > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > div.bili-video-card__info--bottom > a.bili-video-card__info--owner > span.bili-video-card__info--author:has-text(/^AI|ai|爱吃|显卡少女|程序员/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.bili-video-card.is-rcmd.enable-no-interest:has( > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > div.bili-video-card__info--bottom > a.bili-video-card__info--owner > span.bili-video-card__info--author:has-text(/^AI|ai|爱吃|显卡少女|程序员/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.feed-card:has( > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > div.bili-video-card__info--bottom > a.bili-video-card__info--owner > span.bili-video-card__info--author:has-text(/穿毛裤的小拉泽/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.bili-video-card.is-rcmd.enable-no-interest:has( > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > div.bili-video-card__info--bottom > a.bili-video-card__info--owner > span.bili-video-card__info--author:has-text(/穿毛裤的小拉泽/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.feed-card:has( > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > div.bili-video-card__info--bottom > a.bili-video-card__info--owner > span.bili-video-card__info--author:has-text(/瞎问虾猜丶/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.bili-video-card.is-rcmd.enable-no-interest:has( > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > div.bili-video-card__info--bottom > a.bili-video-card__info--owner > span.bili-video-card__info--author:has-text(/瞎问虾猜丶/))

!拦截B站首页指定标题的视频(一条为最上层可刷新的，另一条为瀑布流固定刷新的)
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.feed-card:has( > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > h3.bili-video-card__info--tit > a:has-text(/黑神话|黑悟空|黑猴|原神|米哈游|星穹铁道|鸣潮|碧蓝航线|明日方舟/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.bili-video-card.is-rcmd.enable-no-interest:has( > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > h3.bili-video-card__info--tit> a:has-text(/黑神话|黑悟空|黑猴|原神|米哈游|星穹铁道|鸣潮|碧蓝航线|明日方舟/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.feed-card:has( > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > h3.bili-video-card__info--tit > a:has-text(/^爆肝|挑战|一分钟|一口气/))
bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.bili-video-card.is-rcmd.enable-no-interest:has( > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info--right > h3.bili-video-card__info--tit> a:has-text(/^爆肝|挑战|一分钟|一口气/))
!拦截B站热门里的指定标题视频
bilibili.com###app > div.popular-container > div.popular-video-container.popular-list > div.flow-loader > ul.card-list > div.video-card:has( > div.video-card__info > p.video-name:has-text(/原神|米哈游|星穹铁道|鸣潮|碧蓝航线|明日方舟/))
!拦截B站搜索框文本
!ra表示移除后面指定的元素属性，位于指定元素内，
bilibili.com##+js(ra, placeholder, .nav-search-input)
bilibili.com##+js(ra, title, .nav-search-input)

AdGuard的介绍

摘抄自官网：

AdGuard 广告拦截器可有效的拦截所有网页上的所有类型的广告，甚至是在 Facebook，Youtube 以及其它网站的广告！

AdGuard AdBlocker 可以这样：

  1. 拦截所有广告，包括：

    视频广告（还包括 Youtube 视频广告~）

    各种媒体广告，例如视频广告，插播广告和浮动广告！

    令人讨厌的弹窗广告。

    横幅广告和文字广告（包括 Facebook 广告~）

  2. 加速页面载入，节省带宽，屏蔽广告和弹窗！wow

  3. 拦截各种间谍软件，广告软件和拨号安装程序（可选）

  4. 通过拦截常见第三方跟踪系统保护您的隐私（可选）

  5. 保护您对抗恶意和钓鱼攻击（可选）

AdGuard 广告拦截器是如何保护您的隐私？

您只需在 Adugard 的设置内开启”间谍软件和跟踪过滤器”。它就完全可以移除互联网上的所有形式的跟踪。AdGuard 拥有超过 5000 条规则的超大跟踪器过滤器。

AdGuard 如何移除社交媒体的按钮？

您已经厌烦了滋生于您经常访问的网页上的 “赞” 按钮以及类似的小工具了吗？您只需开启 AdGuard 的“社交媒体过滤器” 即可~

AdGuard 广告拦截器如何使您免受在线威胁？

如今我们拥有超过一百八十万个有害网站的记录。AdGuard 可以拦截已知的传播恶意软件的网站，使您的计算机免受病毒、特洛伊木马、蠕虫、间谍软件和广告软件的骚扰。可以自信地说：AdGuard 大大降低了病毒感染的风险，阻止访问有害网站以防止潜在的攻击！

==============================

发行标记：
https://github.com/AdguardTeam/AdguardBrowserExtension/releases

==============================

插件免费开源代码：
https://github.com/AdguardTeam/AdguardBrowserExtension

==============================

发现了 Bug？还是遇到了需要帮助的问题？那请访问我们的论坛寻求帮助吧~链接在这里： https://forum.adguard.com/

AdGuard的使用

  • 在浏览器的插件商店下载安装AdGuard（图例为微软自带浏览器Edge的【获取扩展】页面）

  • 点开插件面板，点击右上角进入设置（如若没有在此处，点击该图右上角黑灰色按钮打开【扩展列表】，勾选对应的小眼睛图标）

  • 左侧菜单选择【过滤器】，下拉打开【自定义过滤器】，下拉选择【添加自定义过滤器】；

    此处添加的是在线的过滤规则，即直接输入网址，插件会自动读取网址内的规则。(直接打开网址就是一大串文本，都是规则)

    在线规则，本文不做推荐，可以自行搜索。

    好吧，就推一个整合版的在线规则：
    https://cdn.jsdelivr.net/gh/damengzhu/abpmerge@main/abpmerge.txt

  • 本文要介绍的完全手写的自定义规则。

    也就是在左侧点击【用户过滤器】，右侧编写拦截规则。

用户自定义规则

使用场景介绍

前面提到的订阅在线链接的规则，其本意仅仅只是拦截广告。

而有时我们希望一些不是广告的东西也被拦截掉，或者是有一些应该被拦截的广告没被拦截（未收录到在线规则中）；

这时就需要我们自己编写规则了。

编写规则

主要介绍我自己常用的，且顺手的规则。

完整的语法规则，可以看官网的教程How to create your own ad filters | AdGuard Knowledge Base

其中有一句提到了“最初，AdGuard的语法是基于Adblock Plus规则的语法。后来，我们用新类型的规则扩展了它，以更好地过滤广告。”

所以说，我们也可以从Adblock Plus官网学习一些语法规则How to write filters – Adblock Plus

摘要一下常用的：

任何以感叹号开头的行都是注释。在规则列表中，它以灰色显示，AdGuard会忽略这一行。

​ ##双井号用于拦截指定html元素(使用CSS选择器的语法)

​ #@#表示无视、不拦截某元素

​ ||双竖线用于表示拦截域名网址（可以精准到域名下的某些目录、某些文件格式，详情看官网语法教程）

​ @@||用于表示无视、不拦截某网址内容，相当于白名单

此外还有一些特殊的语法规则，这个我们后面一个个说。

举例的话，我贴一段其他人写的规则：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
!酷安"提到的好物"
||coolapk.com/v6/page/dataList?$replace=/extra_entities//
||coolapk.com/v6/feed/detail?$replace=/extra_entities//
||coolapk.com/v6/main/indexV?$replace=/extra_entities//
||coolapk.com/v6/feed/detail?$replace=/extra_title//
||coolapk.com/v6/feed/detail?$replace=/include_goods//

!去除"什么值得买"
||coolapk.com/v6/main/indexV8?$replace=/\{"entityType":"card"\,"entityTemplate":"listCard".*?\}\,\{"id/{"id/
!去除热搜
||coolapk.com/v6/main/init?$replace=/\{"data":\[\{"entityType":"card"\,"entityTemplate":"textCard"\,"title":"\\u70ed\\u95e8\\u641c\\u7d22".*?\}\,\{"entityType":"card"\,"entityTemplate":"configCard"/\{"data":[\{"entityType":"card"\,"entityTemplate":"configCard"/
||coolapk.com/v6/search?type=hotSearch$replace=/\{"data":\[.*\]/{"data":[]/
!去除随机应用推荐
||coolapk.com/v6/main/indexV8?$replace=/\,\{.*?"entityType": "card"\,"entityTemplate":"apkImageCard".*?\}\,\{"id"/,{"id"/
!去除评论区下某广告
||coolapk.com/v6/feed/detail?$replace=/detailSponsorCard//

! 信息流及评论区广告
||ctobsnssdk.com^
||pangolin.snssdk.com^
||pangolin-sdk-toutiao.com^
||pangolin-sdk-toutiao-b.com^
||pglstatp-toutiao.com^
||umeng.com^
||tnc*.zijieapi.com^$app
! 帖子详情好物推荐
||api2.coolapk.com/v6/feed/detail$replace=/"_ids":\[.*?]\,"":\[.*?]\,/ /
! 帖子详情赞助内容
||api2.coolapk.com/v6/feed/detail$replace=/\,"":{.*}/}}/
! 发现页去除酷品
||api2.coolapk.com/v6/main/init$replace=/{"id":1170.*?}\,/ /
! 应用游戏页去除推广视频
||api2.coolapk.com/v6/page/dataList$replace=/{"entityType":"card"\,"entityTemplate":"apkImageCard".*?\\u0022}"}\,/ /
! 去除首页还有什么值得买推广
||api2.coolapk.com/v6/main/indexV8$replace=/{"entityType":"card"\,"entityTemplate":"listCard".*?}"}\,/ / 

! -------白名单Start------- !
! AdGuard
@@||local.adguard.org^

! Edge新闻
@@||www.msn.cn/spartan/mmx^

! 银联
@@||yyfweb.postar.cn^

! Bilibili
bilibili.com#@#.btn-ctnr

特定情况下的规则教程

JS语法下，拦截元素属性

B站的搜索框总是会自己显示当下的个性化热搜内容，如果要拦截这个内容，我们可以先用浏览器的F12【开发者工具】，查看网页的HTML源码。

(Edge浏览器也可以右键，点击【检查】)

然后直接双击右侧源码部分，修改一下值，验证一下是不是它，不要怕，整个页面重新刷新就会恢复的。

如图，可以确定是input元素内的placeholder 值影响搜索框的文本。

当然，我们似乎可以直接拦截这个input元素，让我们试试直接在右侧检查工具内，右键【删除元素】

最后结果似乎可行，不过如果我们回到左侧点击搜索框，会发现搜索框无法打开了，无法输入文本。

因此我们不能拦截，也就是删除元素，只能去修改元素的属性。

1
2
3
<div class="nav-search-content">
	<input class="nav-search-input" type="text" autocomplete="off" accesskey="s" maxlength="100" x-webkit-speech="" x-webkit-grammar="builtin:translate" value="" placeholder="苹果16发布会" title="苹果16发布会">
</div>

对于该HTML代码，由于我们要修改的内容是存在于元素的尖括号内，而不是元素的内容。

同时我们并不是直接拦截掉整个元素，仅仅只是修改尖括号内的内容，这时我们就需要使用如下代码规则。

bilibili.com##+js(ra, placeholder, .nav-search-input)

bilibili.com##+js(ra, title, .nav-search-input)

ra表示移除后面指定的元素属性。

placeholder和title是识别要操作的元素属性。

.nav-search-input是识别要操作的元素。

css语法下，锁定包含关键词内容的元素

有的时候，我们希望拦截能够智能化一点，可以拦截指定的内容。

比如说B站主页推送的视频，能拦截某些营销号的视频。

比方说我在文章开头贴的规则之一 之二：

!拦截B站首页指定up主名称的视频(一条为最上层可刷新的，另一条为瀑布流固定刷新的)

bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.feed-card:has( > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info–right > div.bili-video-card__info–bottom > a.bili-video-card__info–owner > span.bili-video-card__info–author:has-text(/小姐姐|小仙女|小哥哥|老师|说车|医生|大佬|同学$/))

bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.bili-video-card.is-rcmd.enable-no-interest:has( > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info–right > div.bili-video-card__info–bottom > a.bili-video-card__info–owner > span.bili-video-card__info–author:has-text(/小姐姐|小仙女|小哥哥|老师|说车|医生|大佬|同学$/))

这段规则就有很多内容可以讲了，先说说该规则的效果。

该规则会拦截名称为“小姐姐|小仙女|小哥哥|老师|说车|医生|大佬|同学”这几个词之一作结尾的up主视频。

这是个人的主观看法，up主名称为这些的很大概率为营销号；

因为我个人觉得正常非商业目的的话，创号应该不会专门去起这种名字，而是更加的网名化。（我宁可一刀切）

先说下怎么写的

确定元素

首先我们可以理由插件自带的快速选中功能，点开插件菜单，点击【拦截此网站上的广告】，然后选定视频卡的up主名称。

选中后，我们打开高级设置，把文本框内的规则全选复制出来。

bilibili.com###i_cecream > div.bili-feed4:last-child > main.bili-feed4-layout:nth-child(3) > div.feed2:last-child > div.recommended-container_floor-aside > div.container.is-version8:first-child > div.feed-card:nth-child(4) > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap:last-child > div.bili-video-card__info.__scale-disable:last-child > div.bili-video-card__info–right > div.bili-video-card__info–bottom:last-child > a.bili-video-card__info–owner > span.bili-video-card__info–author:nth-child(2)

值得注意的是，AdGuard默认是识别某指定元素的第几个，也就是以上规则中的:last-child、:nth-child(2)、:last-child。

一般情况下，这很有效，但在该情景下，并不合适，所以我们先全部删了。

bilibili.com###i_cecream > div.bili-feed4 > main.bili-feed4-layout > div.feed2 > div.recommended-container_floor-aside > div.container.is-version8 > div.feed-card > div.bili-video-card.is-rcmd.enable-no-interest > div.bili-video-card__wrap.__scale-wrap > div.bili-video-card__info.__scale-disable > div.bili-video-card__info–right > div.bili-video-card__info–bottom > a.bili-video-card__info–owner > span.bili-video-card__info–author

目前依旧是识别的up主文本，而我们的目标是拦截整个视频。

我们可以试一试，继续在在AdGuard的拦截页面调节范围，往左调（放大）到超过该视频，然后退一步回来，这样就是最完整的视频卡元素。

bilibili.com###i_cecream > div.bili-feed4:last-child > main.bili-feed4-layout:nth-child(3) > div.feed2:last-child > div.recommended-container_floor-aside > div.container.is-version8:first-child > div.feed-card:nth-child(4)

可以看到，这个视频卡的元素是div.feed-card。

如果我们在B站，往后翻几页，在进行这个检查，会发现视频卡元素变成了div.bili-video-card，所以我们才会一个需求写成两条规则。

处理识别关键词的问题

  • 我们使用的就是:has（）这个语法去标识含有up主名称的视频。
  • 再使用:has-txet()这个语法去标识包含关键词的up主名。
  • 然后使用正则表达式去匹配文本。

正则表达式的语法我们就不在此介绍了。

因此就写成了开头的样子。

CSS语法下，修改页面样式

B站导航栏的文本式纯白色的，而页面背景也是纯白色的，所以直接拦截导航图后会导致看不到导航栏的文本。所以我们需要修改一下导航栏的背景颜色。

另外拦截导航图后，底下的视频卡会跟导航栏挨在一起，不美观，所以也添加了边距。

! CSS 注入：添加导航栏背景色，以及边距
bilibili.com#$#.bili-header { background-color: #39C5BB !important;margin-bottom: 30px !important; }